<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 左侧分类树 -->
      <el-col :span="6">
        <el-card class="category-tree" shadow="hover">
          <div slot="header" class="clearfix">
            <span>API分类</span>
          </div>
          <el-tree
            :data="categoryTree"
            :props="defaultProps"
            node-key="id"
            highlight-current
            @node-click="handleNodeClick"
            :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span class="api-count" v-if="data.apiCount">({{ data.apiCount }})</span>
            </span>
          </el-tree>
        </el-card>
      </el-col>

      <!-- 右侧API列表 -->
      <el-col :span="18">
        <div class="api-list" v-loading="loading">
          <div class="section-title">
            <h2>{{ currentCategory ? currentCategory.name : '全部API' }}</h2>
            <el-button type="text" @click="$router.push('/front/search')">查看更多</el-button>
          </div>
          <el-row :gutter="24">
            <el-col :span="8" v-for="api in apiList" :key="api.id">
              <el-card class="api-card" shadow="hover">
                <div class="api-header">
                  <span class="api-title">{{ api.name }}</span>
                  <el-tag size="small" :type="getStatusType(api.status)" effect="plain">
                    {{ getStatusText(api.status) }}
                  </el-tag>
                </div>
                <div class="api-desc">{{ api.description }}</div>
                <div class="api-meta">
                  <span class="api-calls">
                    <i class="el-icon-view"></i>
                    {{ api.dailyLimit }}次/天
                  </span>
                  <span class="api-type">{{ api.method }}</span>
                </div>
                <div class="api-footer">
                  <el-button type="text" @click="handleView(api)">
                    <i class="el-icon-document"></i> 查看详情
                  </el-button>
                  <el-button type="primary" size="small" @click="handleCall(api)">立即调用</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 分页 -->
          <div class="pagination-container" v-if="total > 0">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryParams.pageNum"
              :page-sizes="[12, 24, 36, 48]"
              :page-size="queryParams.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getApiList } from '@/api/front'
import { listInterfaceCategory } from '@/api/interfaces/interfaceCategory'

export default {
  name: 'FrontHome',
  data() {
    return {
      loading: false,
      total: 0,
      apiList: [],
      categoryTree: [],
      currentCategory: null,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      queryParams: {
        pageNum: 1,
        pageSize: 12,
        categoryId: null,
        keyword: ''
      }
    }
  },
  created() {
    // 从URL获取搜索关键词
    const keyword = this.$route.query.keyword
    if (keyword) {
      this.queryParams.keyword = keyword
    }
    this.getCategoryList()
    this.getList()
  },
  methods: {
    // 获取分类列表
    getCategoryList() {
      listInterfaceCategory().then(response => {
        const categories = response.rows
        // 构建树形结构
        const tree = []
        const map = {}
        
        // 先创建所有节点的映射
        categories.forEach(category => {
          map[category.id] = {
            ...category,
            children: []
          }
        })
        
        // 构建树形结构
        categories.forEach(category => {
          const node = map[category.id]
          if (category.parentId === 0 || !category.parentId) {
            tree.push(node)
          } else {
            const parent = map[category.parentId]
            if (parent) {
              parent.children.push(node)
            }
          }
        })
        
        this.categoryTree = tree
      })
    },
    // 获取API列表
    getList() {
      this.loading = true
      getApiList(this.queryParams).then(response => {
        this.apiList = response.rows
        this.total = response.total
        this.loading = false
      }).catch(() => {
        this.loading = false
        this.$message.error('获取数据失败')
      })
    },
    // 处理分类节点点击
    handleNodeClick(data) {
      this.currentCategory = data
      this.queryParams.categoryId = data.id
      this.queryParams.pageNum = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    },
    handleView(api) {
      this.$router.push(`/front/detail/${api.id}`)
    },
    handleCall(api) {
      this.$router.push(`/front/call/${api.id}`)
    },
    getStatusType(status) {
      const statusMap = {
        '0': 'danger',   // 下线状态 - 红色
        '1': 'success',  // 上线状态 - 绿色
        '2': 'warning'   // 维护状态 - 黄色
      }
      return statusMap[status] || 'info'
    },
    getStatusText(status) {
      const statusMap = {
        '0': '已下线',
        '1': '已上线',
        '2': '维护中'
      }
      return statusMap[status] || '未知状态'
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  .category-tree {
    margin-bottom: 20px;
    
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
      
      .api-count {
        color: #909399;
        font-size: 12px;
      }
    }
  }

  .api-list {
    .section-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      h2 {
        margin: 0;
        font-size: 24px;
        color: #303133;
      }
    }

    .api-card {
      margin-bottom: 24px;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      }

      .api-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .api-title {
          font-size: 16px;
          font-weight: bold;
          color: #303133;
        }
      }

      .api-desc {
        color: #666;
        margin-bottom: 16px;
        height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .api-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        font-size: 13px;
        color: #909399;

        .api-calls {
          i {
            margin-right: 4px;
          }
        }

        .api-type {
          color: #409EFF;
        }
      }

      .api-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 12px;
        border-top: 1px solid #f0f0f0;
      }
    }
  }

  .pagination-container {
    text-align: center;
    margin-top: 40px;
  }
}
</style> 